import React, { useEffect, useState, useRef } from "react";
import { FullScreenContainer, BorderBox1, BorderBox2, BorderBox3, BorderBox4, BorderBox5, BorderBox6, BorderBox7, BorderBox8, BorderBox9, BorderBox13, BorderBox11, Decoration5, Decoration8 } from "@jiaminghi/data-view-react";
import Fly from "./comps/world";
import Count from "./comps/count";
import DynamicBar from "./comps/dynamicBar";
import NormalBar from "./comps/normalBar";
import Pie from "./comps/pie";
import WordClound from "./comps/word_clound";
import Nation from "./comps/nation";
import Hot from "./comps/hot";
import LineArea from "./comps/lineArea";
import Ranking from "./comps/ranking";
import style from "./style.less";

export default () => {
  const [page, setPage] = useState(window.screen);
  const ref = useRef();
  const [rect, setRect] = useState({ height: 0, width: 0 });
  useEffect(() => {
    let box = { width: ref.current.offsetWidth, height: ref.current.offsetHeight };
    console.log("box", box);
    setRect(box);
  }, []);
  useEffect(() => {
    SetStyle();
    window.addEventListener("resize", () => {
      SetStyle();
    }, false);
  }, []);
  const SetStyle = () => {
    let { screen } = window;
    let { clientHeight, clientWidth } = document.body;
    let dom = document.querySelector("#screenPage");
    let scale = clientWidth / screen.width;
    let left = 0;
    if (scale * screen.height >= clientHeight) {
      scale = clientHeight / screen.height;
      left = (clientWidth - scale * screen.width) / 2;
    }
    let top = (clientHeight - scale * screen.height) / 2;

    // console.log("scale", scale);
    dom.style.cssText = `height:${screen.height}px;width:${screen.width}px;transform:scale(${scale},${scale});
    position:fixed;left:0;top:${top}px;left:${left}px;transform-origin:left top`;
  };
  return (
    <div
      id="screenPage"
      style={{ width: page.width,
        height: page.height,
        backgroundImage: "url(assets/images/bg.png)",
        backgroundSize: "100% 100%" }}
    >
      <BorderBox11 title="东奥数据统计平台" backgroundColor="#fafafa">
        <div
          className={`${style["flex-wrap"]} ${style["box-container"]}`}
        >
          <div className={`${style["flex-wrap"]}  ${style["flex-reverse"]} ${style.flex1}`}>
            <div className={`${style["flex-wrap"]} ${style["flex-reverse"]} ${style.flex2}`} style={{ flex: 5 }}>
              <div style={{ width: "100%", heigth: 60, lineHeight: "60px", fontSize: 24, textAlign: "center" }}>
                <h3 >两岸三地热度人物排行</h3>
              </div>

              <div style={{ width: "100%", flex: 1 }}>
                <Ranking />

              </div>


            </div>
            <div className={`${style["flex-wrap"]}  ${style.flex2} ${style["flex-reverse"]}`} style={{ flex: 4 }}>
              <div style={{ width: "100%", heigth: 60, lineHeight: "60px", fontSize: 24, textAlign: "center" }}>
                <h3 >两岸三地热度排行</h3>
              </div>
              <div className={`${style.flex2} ${style["box-bg"]}`} >
                <DynamicBar></DynamicBar>
              </div>
            </div>

            <div className={`${style["flex-wrap"]} ${style["flex-reverse"]}  ${style.flex2}`} style={{ flex: 3 }}>
              <div style={{ width: "100%", heigth: 60, lineHeight: "60px", fontSize: 24, textAlign: "center" }}>
                <h3>年龄分布</h3>
              </div>
              <div className={`${style.flex2} ${style["box-bg"]}`}>
                <NormalBar></NormalBar>
              </div>
            </div>
          </div>
          <div
            className={`${style["flex-wrap"]}  ${style["flex-reverse"]} ${style.flex2}`}
            style={{
              boxSizing: "border-box",
              padding: "10px 20px" }}
          >
            <div
              className={`${style["flex-wrap"]}`}
              style={{
                height: 200,
                width: "100%",
                boxSizing: "border-box",
                flex: 3,
                border: "1px solid black",
                color: "red" }}
            >
              <div>
                <h2 style={{ color: "blue", fontSize: 40 }}>参与人数</h2>
                <Count></Count>
              </div>
            </div>
            <div className={style.flex2} style={{ flex: 5, position: "relative" }} ref={ref}>

              <Fly></Fly>
            </div>
            <div className={style.flex2}>
              <LineArea></LineArea>
            </div>
          </div>
          <div className={`${style["flex-wrap"]} ${style["flex-reverse"]} ${style.flex1}`}>
            <div className={`${style["flex-wrap"]} ${style["flex-reverse"]}  ${style.flex2}`}>
              <div style={{ width: "100%", heigth: 60, lineHeight: "60px", fontSize: 24, textAlign: "center" }}>
                <h3>热点事件</h3>
              </div>
              <div className={`${style.flex2} ${style["box-bg"]}`}>
                <Hot></Hot>
              </div>
            </div>

            <div className={`${style["flex-wrap"]} ${style["flex-reverse"]}  ${style.flex2}`}>
              <div style={{ width: "100%", heigth: 60, lineHeight: "60px", fontSize: 24, textAlign: "center" }}>
                <h3>热词分布</h3>
              </div>
              <div className={`${style.flex2} ${style["box-bg"]}`}>
                <WordClound></WordClound>
              </div>
            </div>
            <div className={`${style["flex-wrap"]} ${style["flex-reverse"]}  ${style.flex2}`}>
              <div style={{ width: "100%", heigth: 60, lineHeight: "60px", fontSize: 24, textAlign: "center" }}>
                <h3>年龄分布</h3>
              </div>
              <div className={`${style.flex2} ${style["box-bg"]}`}>
                <Pie></Pie>
              </div>
            </div>
          </div>
        </div>
      </BorderBox11>
    </div>
  );
};
